<template>
    <!-- navList   START -->
    <div class="container-fluild productContainer">
        <div class="container">
            <el-tabs v-model="activeName" class="navList" @click="changeNav">
                <el-tab-pane :label="item.title" :name="item.id" v-for="(item,index) in productList" :key="item.id">
                    <transition name="productList" appear class="animate__animated"
                        enter-active-class="animate__zoomIn">
                        <div class="row productList-row">
                            <div class="col-sm-6 col-md-4" v-for="(product,index) in item.detail" :key="product.pid"
                                @click="goProductDetail(product)">
                                <div class="thumbnail productList-thumbnail">
                                    <img :src="product.imgUrl" :alt="product.name">
                                    <div class="caption">
                                        <h3>{{product.name}}</h3>
                                        <p>{{product.content}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <!-- navList   END -->
    <div class="productListBackground"></div>
    <!-- 分页器   START-->
    <div class="pagination" v-if="isOne">
        <Pagination :pageNo="thisPageNo" :pageSize="6" :total="19" :continues="5" />
    </div>
    <!-- 分页器   END -->
</template>
<script>
    import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
    import { useProductStore } from "../../../store/product"  //引入product仓库
    import { storeToRefs } from 'pinia'  //引入方法让仓库里的值可以解构赋值并且具有响应式
    import { useRouter } from 'vue-router'
    export default {
        name: "ProductList",
        setup() {
            const mitt = getCurrentInstance() //调用全局事件总线的api
            const bus = mitt.appContext.config.globalProperties.mittBus
            const store = useProductStore()
            const router = useRouter()
            onMounted(() => {
                store.getProductList1()  //通知vuex发送请求获取产品数据,初次加载页面时发送一次请求

                //接受分页器组件传过来的当前页面数值
                bus.on("getPageNo", (pageNo) => {
                    if (pageNo == 1) {//pageNo == 1 则请求分页一的数据
                        store.getProductList1()
                        thisPageNo.value = 1
                    } if (pageNo == 2) {//pageNo == 2 则请求分页二的数据
                        store.getProductList2()
                        thisPageNo.value = 2
                    }
                    if (pageNo == 3) {//pageNo == 3 则请求分页三的数据
                        store.getProductList3()
                        thisPageNo.value = 3
                    }
                    if (pageNo == 4) {//pageNo == 3 则请求分页三的数据
                        store.getProductList4()
                        thisPageNo.value = 4
                    }
                })
            })

            //产品数据
            let { productList } = storeToRefs(store)  //从仓库获取产品分页的数据
            //定义初始选择的导航是第一个
            let activeName = ref(1)
            let isOne = ref(true)
            let thisPageNo = ref(1) //初始化当前页面值
            //切换导航事件,隐藏分页器
            function changeNav(event) {
                if (event.target.id) {//当前id不为空
                    if (event.target.id == "tab-1" || event.target.id == "pane-1") {//当前id为第一分类的产品id则显示分页器
                        isOne.value = true
                    } else {//其他情况隐藏分页器
                        isOne.value = false
                    }
                }
            }
            //跳转到产品详情页面(重开一个页面的写法||但是这样只能在哈希模式下使用)
            function goProductDetail(product) {
                let pushInfo = router.resolve({//通过resolve跳转可以获取跳转地址信息href
                    path: "/product/productdetails",
                    query: {
                        id: product.pid,
                        title: product.name,
                        detail: JSON.stringify(product.sellDetail) //query参数传递过程中会将对象装换成[object object],将其转换为字符串即可解决
                    }
                })
                window.open(pushInfo.href, '_blank') //跳转路由并开启新的页面
            }

            //跳转到产品详情页面 | 不开启新页面直接跳转
            // function goProductDetail(product) {
            //     router.push({
            //         path: "/product/productdetails",
            //         query: {
            //             id: product.pid,
            //             title: product.name,
            //             detail: JSON.stringify(product.sellDetail) //query参数传递过程中会将对象装换成[object object],将其转换为字符串即可解决
            //         }
            //     })
            // }
            return {
                activeName,
                productList,
                isOne,
                thisPageNo,
                changeNav,
                goProductDetail
            }
        }
    }
</script>
<style lang="css">
    /* navList   START */
    .productContainer {
        background-color: #fff;
        height: 90px;
        width: 100%;
        background: url(./images/navImg.png) no-repeat;
        background-size: 100% 90px;
    }

    .productContainer .navList {
        height: 71px;
        line-height: 71px;
    }

    .productContainer .el-tabs__item {
        font-family: 'Source Han Sans CN';
        font-size: 16px;
        font-weight: normal;
        color: #999;
        transition: color 0.2s linear;
    }

    .productContainer .el-tabs__item:hover {
        color: #4F68AC;
    }

    .productContainer .is-active {
        color: #4F68AC;
        font-weight: bold;
        transition: all 0.2s linear;
    }

    .productContainer .el-tabs__active-bar {
        background-color: #4F68AC;
    }

    .productContainer .productList-row {

        margin: 30px 10px 0 10px;
    }

    .productContainer .productList-thumbnail {
        border: 0 solid #eeeeee;
        border-radius: 0px;
        padding: 20px 20px 10px 20px;
        margin-bottom: 40px;
        background-color: #f8f8f8;
        font-family: "Source Han Sans CN";
        text-align: left;
        line-height: 30px;
        cursor: pointer;
        transition: all 0.2s linear;
    }

    .productContainer .productList-thumbnail:hover {
        box-shadow: 1px 10px 34px 1px rgb(0 0 0 / 10%);
        transform: translateY(-3px);

    }

    .productContainer .productList-thumbnail h3 {
        font-size: 20px;
        color: #333;
        margin-top: 20px;
        margin-bottom: 5px;
        overflow: hidden;
        /*不换行*/
        white-space: nowrap;
        /*溢出显示省略号*/
        text-overflow: ellipsis;
    }

    .productContainer .productList-thumbnail p {
        font-size: 16px;
        color: #999;
        overflow: hidden;
        /*不换行*/
        white-space: nowrap;
        /*溢出显示省略号*/
        text-overflow: ellipsis;
    }

    .productListBackground {
        background: linear-gradient(to bottom, #fff, #f8f8f8 5%, #f8f8f8);
        width: 100%;
        height: 1200px;
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        width: 100%;
        height: 100px;
        background-color: #f8f8f8;
    }

    /* navList   END */

    /* 设置响应式 */
    /* 手机端 */
    @media (max-width: 768px) {
        .productListBackground {
            height: 2300px;
        }
    }

    /* pad端 */
    @media (min-width: 992px) {
        .productListBackground {
            height: 760px;
        }
    }

    /* PC端 */
    @media (min-width: 1200px) {
        .productListBackground {
            height: 870px;
        }
    }
</style>